<template>
  <div class="main-header">
    <el-icon size="28px" @click="fnChangeFold">
      <component :is="isFold ? 'fold' : 'Expand'"></component>
    </el-icon>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>驾校管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">车辆管理</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div></div>
    <el-icon><Bell /></el-icon>
    <el-icon><Setting /></el-icon>
    <el-dropdown style="border: 0">
      <span class="el-dropdown-link">
        <el-image style="width: 40px; height: 40px" :src="avatarImg" fit="cover" />哪吒三太子
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click="fnLoginOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { localCache } from "@/utils/cache"
import { useRouter } from "vue-router"
const router = useRouter()
let isFold = ref(false)
import avatarImg from "@/assets/img/toux.png"
const emit = defineEmits(["fnChangeFlag"])
const fnChangeFold = () => {
  isFold.value = !isFold.value
  emit("fnChangeFlag", isFold.value)
}
const fnLoginOut = () => {
  localCache.clearCache()
  router.push("/login")
}
</script>
<style scoped lang="scss">
.main-header {
  display: grid;
  grid-template-columns: 40px 300px 1fr 30px 30px auto;
  align-items: center;
  color: #fff;
  margin-top: 5px;
  outline: none;
  :deep(.el-breadcrumb) {
    --el-text-color-regular: #fff;
    --el-text-color-placeholder: #fff;
  }
  .el-dropdown * {
    outline: none;
  }
  .el-dropdown {
    .el-dropdown-link {
      display: flex;
      align-items: center;
      color: #fff;
      .el-image {
        margin-right: 5px;
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }
}
</style>
